<template>
	<!-- 搜索框 -->
	<view>
		<view class="mp-header">
			<!-- #ifdef MP-WEIXIN || APP-PLUS -->
			<view class="sys-head tui-skeleton" :style="{ height: statusBarHeight }"></view>
			<!-- #endif -->
			<view class="serch-box tui-skeleton" :style="[boxStyle]" style="height: 43px">
				<view class="serch-wrapper flex">
					<view v-if="logoConfig" class="logo skeleton-rect">
						<image :src="logoUrl" mode=""></image>
					</view>
					<navigator
						:style="[contentStyle]"
						v-if="hotWords.length > 0"
						:url="'/pages/goods/goods_search/index?searchVal=' + searchVal"
						:class="logoConfig ? 'input' : 'uninput'"
						hover-class="none"
						class="skeleton-rect"
					>
						<view class="swiperTxt">
							<text class="iconfont icon-sousuo8"></text>
							<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" vertical="true" circular="true" @change="textChange">
								<block v-for="(item, index) in hotWords" :key="index">
									<swiper-item catchtouchmove="catchTouchMove">
										<view class="acea-row row-between-wrapper">
											<view class="text">
												<view class="newsTitle line1">{{ item.val }}</view>
											</view>
										</view>
									</swiper-item>
								</block>
							</swiper>
						</view>
					</navigator>
					<navigator hover-class="none" v-else url="/pages/goods/goods_search/index" :class="logoConfig ? 'input' : 'uninput'" class="skeleton-rect">
						<text class="line1">{{ placeWords }}</text>
						<text class="iconfont icon-xiazai5"></text>
					</navigator>
				</view>
			</view>
		</view>
		<view :style="'height:' + marTop + 'px;'"></view>
	</view>
</template>

<script>
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2 + 'rpx';
export default {
	name: 'headerSerch',
	props: {
		dataConfig: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			statusBarHeight: statusBarHeight,
			indicatorDots: false,
			autoplay: true,
			duration: 500,
			marTop: 0,
			searchH: 0,
			searchVal: ''
		};
	},
	computed: {
		//轮播切换时间
		interval() {
			return this.dataConfig.titleConfig.val * 1000;
		},
		//判断logo图是否展示
		logoConfig() {
			return this.dataConfig.logoConfig.url && this.dataConfig.searConfig.tabVal === 1;
		},
		//logo图
		logoUrl() {
			return this.dataConfig.logoConfig.url;
		},
		//最外层盒子的样式
		boxStyle() {
			return {
				borderRadius: this.dataConfig.bgStyle.val * 2 + 'rpx',
				background: `linear-gradient(${this.dataConfig.bgColor.color[0].item}, ${this.dataConfig.bgColor.color[1].item})`,
				margin: 0 + ' ' + this.dataConfig.lrConfig.val * 2 + 'rpx' + ' ' + 0
			};
		},
		//搜索热词
		hotWords() {
			return this.dataConfig.hotWords.list;
		},
		//内容圆角
		contentStyle() {
			return {
				borderRadius: this.dataConfig.contentStyle.val ? this.dataConfig.contentStyle.val + 'px' : '0',
				background: this.dataConfig.borderColor.color[0].item,
				color: this.dataConfig.textColor.color[0].item,
				textAlign: this.dataConfig.textPosition.list[this.dataConfig.textPosition.tabVal].style
			};
		},
		//搜索提示语
		placeWords() {
			return this.dataConfig.placeWords.val;
		}
	},
	mounted() {
		let that = this;
		setTimeout(() => {
			// 获取小程序头部高度
			let info = uni.createSelectorQuery().in(this).select('.mp-header');
			info
				.boundingClientRect(function (data) {
					that.marTop = data.height;
				})
				.exec();
		}, 100);
	},
	methods: {
		textChange(e) {
			let { current, source } = e.detail;
			if (source === 'autoplay' || source === 'touch') {
				this.searchVal = this.hotWords[e.detail.current]['val'];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.ml40 {
	margin-left: 40rpx;
}
.sys-head {
	background: #f5f5f5;
}
.header {
	width: 100%;
	background: #ffffff;

	.btn {
		position: relative;

		.iconfont {
			font-size: 45rpx;
		}
	}

	.iconnum {
		min-width: 6px;
		color: #fff;
		border-radius: 15rpx;
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		font-size: 10px;
		padding: 0 4px;
	}

	.serch-wrapper {
		align-items: center;
		padding: 20rpx 24rpx 20rpx 24rpx;

		.logo {
			width: 152rpx;
			height: 60rpx;
		}
	}
}

.swiperTxt {
	width: 100%;
	height: 100%;
	line-height: 58rpx;
	overflow: hidden;
}

.swiperTxt .text {
	width: 100%;
}

.swiperTxt .text .label {
	font-size: 20rpx;
	color: #ff4c48;
	width: 64rpx;
	height: 30rpx;
	border-radius: 40rpx;
	text-align: center;
	line-height: 28rpx;
	border: 2rpx solid #ff4947;
}

.swiperTxt .text .newsTitle {
	// width: 300rpx;
	font-size: 24rpx;
	text-align: center;
	/* #ifdef MP */
	width: 260rpx !important;
	/* #endif */
}

.swiperTxt swiper {
	height: 100%;
}

.mp-header {
	z-index: 90;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;

	.logo {
		line-height: 0;
	}

	.serch-wrapper {
		height: 100%;
		align-items: center;
		padding: 0 30rpx;

		image {
			width: 152rpx;
			height: 60rpx;
			margin-right: 20rpx;
		}

		.input,
		.uninput {
			display: flex;
			align-items: center;
			/* #ifdef MP*/
			width: 50%;
			/* #endif */
			/* #ifdef H5 || APP*/
			width: 100%;
			flex: 1;
			/* #endif */
			height: 58rpx;
			line-height: 58rpx;
			padding: 0 20rpx 0 54rpx;
			background: rgba(0, 0, 0, 0.22);
			border: 1px solid #e4e4e4;
			border-radius: 29rpx;
			color: #fff;
			font-size: 28rpx;
			position: relative;
			box-sizing: border-box;

			.iconfont {
				position: absolute;
				left: 14rpx;
				//top: 10rpx;
			}
			.line1 {
				display: inline-block;
				width: 400rpx;
			}
		}

		.uninput {
			/* #ifdef MP */
			width: 510rpx !important;
			/* #endif */
			/* #ifndef MP */
			width: 100%;
			/* #endif */
		}
	}
}
</style>
